<template>
    <view class="my-info">
        <!-- <van-toast id="van-toast" /> -->
        <!-- 提示弹窗 -->
        <u-top-tips ref="uTips" navbar-height="0"></u-top-tips>
        <!-- 个人信息 -->
        <view class="setView">
            <view class="userAvatar">
                <image :src="userInfo.userAvatar" mode="widthFix">
                </image>
                <view v-show="pageFlag">暂不支持更换头像</view>
                <!-- <view hidden="{{upImageStatic!=0}}">点击选择新头像</view> -->
                <!-- <view class="upImage"> -->
                    <!-- <button class="cu-btn bg-cyan sm" bindtap="imageConfirm" hidden="{{upImageStatic!=1}}">确认并上传新头像</button> -->
                <!-- </view> -->
            </view>
            <view class="cu-form-group">
                <view class="title"> <text class="iconfont iconxingmingyonghumingnicheng"></text> 昵称</view>
                <u-input v-if="pageFlag" v-model="userInfo.nickname" type="text" placeholder="统一标题的宽度" maxlength="16" />
                <u-input v-else v-model="userInfo.nickname" :disabled='true'  placeholder="~" />
            </view>
            <view class="cu-form-group">
                <view class="title"><text class="iconfont iconyouxiang"></text> 邮箱</view>
                <u-input v-if="pageFlag" v-model="userInfo.email" type="text" placeholder="留个联系方式如何(选填)" maxlength="20" />
                <u-input v-else v-model="userInfo.email" :disabled='true'  placeholder="~" />
            </view>
            <view class="cu-form-group">
                <view class="title"> <text class="iconfont icontop_lianxifangshi"></text> 手机</view>
                <u-input v-if="pageFlag" v-model="userInfo.phone" type="text" placeholder="留个联系方式如何(选填)" maxlength="11" />
                <u-input v-else v-model="userInfo.phone" :disabled='true'  placeholder="~" />
            </view>
            <view class="cu-form-group">
                <view class="title"> <text class="iconfont iconicon-test"></text> 备注</view>
                <u-input v-if="pageFlag" v-model="userInfo.remark" type="text" placeholder="写下个性化的备注吧~" maxlength="11" />
                <u-input v-else v-model="userInfo.remark" :disabled='true'  placeholder="~" />
            </view>
            <view class="btv" v-if="pageFlag">
                <button class="cu-btn line-blue round margin-right lg button-hover" @click="switchPageStats">取消修改</button>
                <button class="cu-btn bg-green round margin-left lg button-hover" @click="setUserInfo">确认修改</button>
            </view>
             <view v-else class="padding flex flex-direction btv">
                <button class="cu-btn round bg-green margin-tb-sm lg button-hover" @click="switchPageStats" >修改个人信息</button>
            </view>
        </view>
        <!-- 加载缓冲页 -->
        <!-- <view hidden="{{pageFlag!=0}}">
            <view class="cu-load bg-blue {{!isLoad?'loading':'over'}}"></view>
        </view> -->

    </view>
</template>

<script>
import {updateUserInfoUsingPOST} from '/common/api/user'
export default {
    data(){
        return{
            key1: 'userInfo',
            key2: 'token',
            userInfo: {
                userAvatar:'../../static/images/avatar.jpeg',
                nickname:'',
                email:'',
                phone:'',
                remark:'',
            },
            pageFlag: false,
            // upImageStatic: 0,//0 提示  1 确认上传  2隐藏  用于图片上擦混
        }
    },
    created(){
        this.getUserInfo()
    },
    methods:{
        //获取用户信息
        getUserInfo(){
            if(wx.getStorageSync("welinkToken")){
                this.userInfo.nickname=this.$store.state.welinkUserInfo.userNameCn
                this.userInfo.email=this.$store.state.welinkUserInfo.userEmail
                this.userInfo.phone=this.$store.state.welinkUserInfo.mobileNumber
                this.userInfo.remark=this.$store.state.welinkUserInfo.remark
            }else{
                this.userInfo=this.$store.state.userInfo
            } 
        },
        //切换View 显示页/修改页
        switchPageStats() {
            this.pageFlag=!this.pageFlag
        },
        //修改用户信息
        setUserInfo(){
            const data={
                userAvatar:this.userInfo.userAvatar,
                nickname:this.userInfo.nickname,
                email:this.userInfo.email,
                phone:this.userInfo.phone,
                remark:this.userInfo.remark
            }
            updateUserInfoUsingPOST(data).then(res=>{
                if(res.data.code==200){
                    this.pageFlag=false
                }
                this.$refs.uTips.show({
				title: res.data.message,
				type: 'primary',
			})
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.my-info{
    height: 100%;
    .myInfoView .userAvatar,
.setView .userAvatar {
  margin: 100rpx auto;
  text-align: center;
}
.myInfoView .userAvatar image,
.setView .userAvatar image {
  width: 200rpx;
}
.myInfoView .userAvatar .empty,
.setView .userAvatar .empty {
  margin: 0 auto;
  width: 200rpx;
  height: 200rpx;
  font-size: 150rpx;
  border: 4rpx solid #d4d4d4;
  border-radius: 100rpx;
}
.myInfoView .cu-form-group .title,
.setView .cu-form-group .title {
  width: 160rpx;
  color: gray;
  margin-right: 50rpx;
  border-right: 1rpx solid gray;
}
.myInfoView .cu-form-group .textAre,
.setView .cu-form-group .textAre {
  width: 400rpx;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myInfoView .btv,
.setView .btv {
  margin-top: 50rpx;
  margin-bottom: 50rpx;
}
.setView .userAvatar {
//   opacity: 0.5;
  filter: grayscale(50%);
}
.setView .userAvatar view,
.setView .userAvatar .upImage {
  margin-top: 20rpx;
}
.setView .btv {
  width: 100%;
  text-align: center;
}
}
</style>